<template>
  <div class="asideHome" style="display: flex;width: 100%;">
    <el-aside class="mini-tabs panorama fullMenu" :class="menuClass ? menuClass : (menuLayout === 'sheet' && busType === 'deal' ? 'width-150' : 'w-200')">
      <el-menu ref="asideMenu" :default-active="defaultActive" :default-openeds="defaultOpends" :unique-opened="false" class="el-menu-vertical" @select="handleSelect">
        <template v-for="(item, key) in childLeftMenu"> <!-- 1 -->
          <template v-if="item.children && item.children.length > 0 && item.component && item.menuType === 'C'">
            <el-menu-item :key="key" :item="item" :index="item.id"><i class="el-menu-icon" />{{ $t(item.menuName) }}</el-menu-item>
          </template>
          <el-submenu v-else-if="item.children && item.children.length > 0 && (menuLayout === 'default' || busType !== 'deal')" :key="key" :item="item" :index="item.id" class="ulMenu">
            <template slot="title"><span><i v-if="item.children && item.children.length > 0" class="el-menu-icon" />{{ $t(item.menuName) }}</span></template>
            <template v-for="(el, i) in item.children"> <!-- 2 -->
              <template v-if="el.component">
                <el-menu-item :key="i" :item="el" :index="el.id" class="liMenu" :class="language === 'zh_cn' ? 'w50' : 'w100'" :title="$t(el.menuName)">{{ $t(el.menuName) }}</el-menu-item>
              </template>
              <template v-else>
                <el-submenu v-if="el.children && el.children.length > 0" :key="i" :item="el" :index="el.id">
                  <template slot="title"><span>{{ $t(el.menuName) }}</span></template>
                  <el-menu-item v-for="(ol, j) in el.children" :key="j" :item="ol" :index="ol.id">{{ $t(ol.menuName) }}</el-menu-item> <!-- 3 -->
                </el-submenu>
                <el-menu-item v-else :key="i" :item="el" :index="el.id">{{ $t(el.menuName) }}</el-menu-item>
              </template>
            </template>
          </el-submenu>
          <el-menu-item v-else :key="key" :item="item" :index="item.id"><i class="el-menu-icon" />{{ $t(item.menuName) }}</el-menu-item>
        </template>
      </el-menu>
    </el-aside>
    <div v-loading="loading" :class="menuClass ? 'mainContainer' : (menuLayout === 'sheet' && busType === 'deal' ? 'sheetVoteMain' : 'voteMain')">
      <!--动态页面 ，根据is的值来确定渲染哪个组件 -->
      <component :is="menuPath" v-if="menuLayout === 'default' || busType !== 'deal'" ref="menuPath" :parameter="parameter" :bus-id="busId" :bus-type="busType" :bus-name="busName" />
      <menu-layout v-if="menuLayout === 'sheet' && busType === 'deal'" ref="menuPath" />
    </div>
    <div v-show="false" id="hideContainer" />
    <!-- <sub-components ref="SubComponents" /> -->
  </div>
</template>

<script>
import merge from 'webpack-merge'
import { getAsyncComponent } from '@/utils'
import MenuLayout from '@/views/deal/home/sheet/index'
// import Vue from 'vue'
// import { loadMicroApp } from 'qiankun'
import { importComponent } from '@/qiankun/index'
import { appsVariable } from '@/qiankun/registerApp'
// import { SubComponents } from '@/layout/components'

export default {
  components: {
    MenuLayout
  },
  props: {
    busId: {
      type: String,
      default: () => ''
    },
    busType: {
      type: String,
      default: () => ''
    },
    childLeftMenu: {
      type: Array,
      default: () => []
    },
    defaultOpends: {
      type: Array,
      default: () => []
    },
    defaultActive: {
      type: String,
      default: undefined
    },
    busName: {
      type: String,
      default: ''
    },
    dealBaseFormFlag: {
      type: String,
      default: ''
    },
    dealBaseFormTempletId: {
      type: String,
      default: ''
    },
    menuClass: {
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      loading: false,
      companyId: this.$route.query.companyId,
      businessId: this.$route.query.id,
      // 组件地址
      menuPath: '',
      parameter: {}, // 菜单参数
      menuLayout: 'default',
      menuKey: '',
      language: ''
    }
  },
  watch: {
    childLeftMenu: {
      handler(val) {
        console.log(this.defaultOpends)
        if (val.length > 0) {
          if (this.defaultActive) {
            this.handleSelect(this.defaultActive)
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    this.menuLayout = this.$store.state.app.menuLayout ? this.$store.state.app.menuLayout : 'default'
  },
  mounted() {
    this.language = window.localStorage.getItem('language')
  },
  methods: {
    load(path = '') {
      console.log('load')
      if (this.$refs.menuPath?.init !== undefined) {
        var dData = {}
        dData.id = this.busId
        dData.busType = this.busType
        dData.companyId = this.companyId
        dData.menuId = this.$refs.asideMenu.activeIndex
        if (this.menuLayout === 'sheet' && this.busType === 'deal') {
          dData.menu = this.sheetMenu
          dData.menuPath = path
          dData.busName = this.busName
        }
        this.$refs.menuPath.init(dData)
        this.$refs.menuPath.openLocation = 'Home'
      }
    },
    // 是否项目表单配置路径
    isOnlConfig(menuPath) {
      var dealType = sessionStorage.getItem('dealBaseFormDealType' + this.$route.query.id)
      var dealBaseFormFlag = localStorage.getItem('dealBaseFormFlag')
      var dealBaseFormTempletId = localStorage.getItem('dealBaseFormTempletId')
      var dealTypes = localStorage.getItem('configFormDealType')
      if (menuPath && menuPath.includes('dealBaseForm') && dealTypes.indexOf(dealType) !== -1 && dealBaseFormFlag === 'configForm') {
        const newKey = menuPath.split('?')[1]
        menuPath = 'system/desform/release/onlineTemplate?queryId=' + dealBaseFormTempletId + '&type=deal'
        if (newKey) {
          menuPath = menuPath + '&' + newKey
        }
      }
      return menuPath
    },
    // 获取地址
    async handleSelect(key) {
      const index = this.findPath(this.childLeftMenu, key)
      if (index) {
        this.menuKey = index.menuKey
        console.log(index, 222)
        var menuPath = index.component
        menuPath = this.isOnlConfig(menuPath)
        // 如果菜单布局方式为sheet类型，则直接调用load
        if (this.menuLayout === 'sheet' && this.busType === 'deal') {
          this.sheetMenu = index
          this.load()
          return
        }
        if (menuPath != null) {
          this.importFormPath(menuPath)
        } else {
          const error = 'error/404'
          this.importFormPath(error)
        }
      }
      this.listComponent()
    },
    findPath(array, id, parent = false) {
      for (let i = 0; i < array.length; i++) {
        const item = array[i]
        if (item.id === id) {
          return item
        }
        if (item.children) {
          const child = this.findPath(item.children, id)
          if (child) {
            if (parent) {
              return item
            } else {
              return child
            }
          }
        }
      }
    },
    // 引入组件
    async importFormPath(menuPath) {
      // 循环所有子应用，如果是子应用的菜单，则引用他们的组件
      const apps = appsVariable()
      var subAppName
      var isSubAppMenuPath = false
      var subApp
      if (apps) {
        apps.forEach(element => {
        if (menuPath && menuPath.includes(element.name)) {
          isSubAppMenuPath = true
          subAppName = element.name
          subApp = element
          return
        }
      })
      }
      if (menuPath !== null && menuPath !== '') {
        const newPath = menuPath.lastIndexOf('\/')
        var strPath = ''
        console.log('导入组件')
        console.log(isSubAppMenuPath)
        if (isSubAppMenuPath) {
          strPath = menuPath.substring(newPath + 1, menuPath.length)
          const componentName = strPath + '_' + subAppName
          // 导入子应用的组件
          await importComponent(subApp, componentName)
          this.menuPath = componentName
          console.log(this.menuPath)
        } else {
          if (menuPath.indexOf('?') === -1) { // 不含问号
            strPath = menuPath.substring(newPath + 1, menuPath.length)
            this.menuPath = getAsyncComponent('@/views/' + menuPath)
            this.parameter = {}
            this.parameter.menuPath = strPath
          } else {
            const index = menuPath.lastIndexOf('?')
            const sMenuPath = menuPath.substring(0, index)
            this.menuPath = getAsyncComponent('@/views/' + sMenuPath)

            strPath = sMenuPath.substring(sMenuPath.lastIndexOf('\/') + 1, sMenuPath.length)
            // 增加参数
            const newKey = menuPath.split('?')[1]
            var newstr = newKey.replace(/=/g, '":"')
            const objectKey = '{"' + newstr.replace(/&/g, '","') + '"}'
            this.parameter = JSON.parse(objectKey)
            this.parameter.menuPath = strPath
          }
          var _query = JSON.parse(JSON.stringify(this.parameter))
          delete _query['menuKey']
          // console.log('删除后的对象: ', _query)
          this.$router.push({ // 地址栏添加左侧菜单地址
            query: merge(this.$route.query, _query)
          })
        }
      } else {
        if (this.childLeftMenu[0]?.children !== undefined) {
          this.$refs.asideMenu.activeIndex = this.childLeftMenu[0].children[0].id
          this.importFormPath(this.childLeftMenu[0].children[0].component)
        } else {
          console.log(this.childLeftMenu)
          this.$refs.asideMenu.activeIndex = this.childLeftMenu[0].id
          this.importFormPath(this.childLeftMenu[0].component)
        }
        this.listComponent()
      }
    },
    listComponent() {
      this.$bus.$once('async_done', () => {
        this.load()
      })
    }
  }
}
</script>

<style lang="scss" scoped>

/deep/ .w-200{
  width: 200px!important;
}
/deep/ .w-240{
  width: 240px!important;
}
.voteMain {
  margin-left: 200px;
  width: calc(100% - 200px);
}
.sheetVoteMain {
  margin-left: 150px;
  width: calc(100% - 150px);
}
.mainContainer{
  padding: 15px;
  margin-left: 240px;
  width: calc(100% - 240px);
}
.el-container{
  height: 100%;display: flex;
}
.diyMain{
  margin-left: 200px;
}
.boxHeight{
  height: 450px;
}
</style>

<style lang="scss" scoped>

/deep/ .el-menu{
  .el-icon-menu {
    width: 16px!important;
    font-size: 15px!important;
  }

  .el-menu-item, .el-submenu__title{
    height: 50px;
    line-height: 50px;
    // display: flex;
    // align-items: center;
    font-weight: bold;
    >span{
      display: flex;
      align-items: center;
    }
  }
  .el-menu-item {
    .el-icon-menu {
      line-height: 21px;
    }
  }
  .ulMenu {
    .liMenu {
      min-width: auto;
      display: inline-block;
    }
  }
  .el-submenu .el-menu-item{
    color: #666666;
    font-weight: 400;
  }
}
.w50{
  width: 50%;
}
.w100{
  width: 100%;
}
/deep/.el-menu-vertical{
  width: 100%;
  height: auto !important;
  >li{
    width: 100%;
    >.el-submenu__title{
      padding-left: 10px !important;
    }
  }
  >.el-menu-item{
    padding-left: 10px !important;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  >li>.el-menu{
    // padding-top: 10px;
    >.el-menu-item{
      padding-left: 30px !important;
      padding-right: 0px;
      overflow: hidden;
      text-overflow: ellipsis;
      height: 30px;
      line-height: 30px;
      &:first-child {
        margin-top: 5px;
      }
      &.w50{
        &:nth-child(2n) {
          padding-left: 15px !important;
        }
      }
    }
    >.el-submenu{
      >.el-submenu__title{
        padding-left: 35px !important;
      }
      >.el-menu>.el-menu-item{
        padding-left: 45px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-right: 20px;
        height: 40px;
        line-height: 40px;
      }
    }
  }
}
</style>
